import { Dropdown } from "antd";
import { useNavigate } from "react-router-dom";

import logo from "../assets/img/logo.png";
import customSvg from "../components/customSvg";
const RecordIcon = customSvg["RecordIcon"];
const HomeIcon = customSvg["HomeIcon"];
const UserSvgIcon = customSvg["UserSvgIcon"];
const OwnIcon = customSvg["OwnIcon"];
const AccountIcon = customSvg["AccountIcon"];
const UserIcon = customSvg["UserIcon"];
const PasswordIcon = customSvg["PasswordIcon"];
const HospitalIcon = customSvg["HospitalIcon"];
const AboutIcon = customSvg["AboutIcon"];

import useSystemStore from "../store/system";
import useUserStore from "../store/user";

export default function Head() {
  const softwareType = useSystemStore((state) => state.softwareType);
  const { curRoute, setCurRoute } = useSystemStore((state) => state);
  const user = useUserStore((state) => state.user);
  const removeUser = useUserStore((state) => state.removeUser);
  const navigation = useNavigate();

  const menus = [
    {
      key: "1",
      label: <span>账号管理</span>,
      icon: <AccountIcon />,
    },
    {
      key: "2",
      label: <span>用户信息</span>,
      icon: <UserIcon />,
    },
    {
      key: "3",
      label: <span>医院信息</span>,
      icon: <HospitalIcon />,
    },
    {
      key: "4",
      label: <span>修改密码</span>,
      icon: <PasswordIcon />,
    },
    {
      key: "5",
      label: <span>关于</span>,
      icon: <AboutIcon />,
    },
    {
      key: "6",
      label: <span>退出</span>,
      icon: <AboutIcon />,
    },
  ];
  const handleTabClick = (type) => {
    setCurRoute(type);
  };
  //处理菜单点击事件
  const handleMenuClick = (e) => {
    if (e.key == "6") {
      navigation("/");
      removeUser();
    } else {
      if(e.key == "1"){
        setCurRoute('user');
      }
      console.log(e.key);
    }
  };

  return (
    <div className="w-full h-full flex items-center justify-between bg-head-bg custom-shadow">
      <div className="flex items-center">
        <img className=" w-48 h-10 cursor-pointer ml-6 mr-6" src={logo}></img>
        {softwareType == 1 ? (
          <span className="text-custom-gray text-28px font-bold">
            远程自动超声辅助诊断系统
          </span>
        ) : (
          <span className="text-custom-gray text-28px font-bold">
            远程超声诊断系统
          </span>
        )}
      </div>
      <div className="flex items-center">
        <span className="text-custom-gray text-28px">
          华中科技大学同济医学院附属协和医院
        </span>
      </div>
      <div className="flex items-center">
        <div
          className={`${
            curRoute == "home"
              ? "text-[#00ffff] border-[#00ffff] bg-[rgba(16,185,185,0.1)]"
              : "text-[#dbdbdb] border-[#434343]"
          } w-16 h-16 flex items-center justify-center mr-3 rounded-lg bg-menu-bg custom-shadow-meun cursor-pointer border-solid border-2 hover:text-[#00ffff] hover:border-[#00ffff] hover:bg-[rgba(16,185,185,0.1)]`}
          onClick={() => handleTabClick("home")}
        >
          <HomeIcon />
        </div>
        <div
          className={`${
            curRoute == "own"
              ? "text-[#00ffff] border-[#00ffff] bg-[rgba(16,185,185,0.1)]"
              : "text-[#dbdbdb] border-[#434343]"
          } w-16 h-16 flex items-center justify-center mr-3 rounded-lg bg-menu-bg custom-shadow-meun cursor-pointer border-solid border-2 hover:text-[#00ffff] hover:border-[#00ffff] hover:bg-[rgba(16,185,185,0.1)]`}
          onClick={() => handleTabClick("own")}
        >
          <OwnIcon />
        </div>
        <div
          className={`${
            curRoute == "record"
              ? "text-[#00ffff] border-[#00ffff] bg-[rgba(16,185,185,0.1)]"
              : "text-[#dbdbdb] border-[#434343]"
          } w-16 h-16 flex items-center justify-center mr-3 rounded-lg bg-menu-bg custom-shadow-meun cursor-pointer border-solid border-2 hover:text-[#00ffff] hover:border-[#00ffff] hover:bg-[rgba(16,185,185,0.1)]`}
          onClick={() => handleTabClick("record")}
        >
          <RecordIcon />
        </div>
        <div className=" text-[#dbdbdb] w-16 h-16 flex items-center justify-center mr-3 rounded-lg bg-menu-bg custom-shadow-meun cursor-pointer border-solid border-2 border-[#434343] hover:text-[#00ffff] hover:border-[#00ffff] hover:bg-[rgba(16,185,185,0.1)]">
          <Dropdown menu={{ items: menus, onClick: handleMenuClick }}>
            <span className=" flex items-center text-[#dbdbdb] hover:text-[#00ffff]">
              <UserSvgIcon />
              <span className=" inline-block max-w-20 truncate text-[16px] text-custom-gray hover:text-[#00ffff]">
                {user.username}
              </span>
            </span>
          </Dropdown>
        </div>
      </div>
    </div>
  );
}
